﻿@namespace SimpleBoard.Backend.Pages
@page "/device/list/add"
@using System.ComponentModel.DataAnnotations
@using AntDesign

<PageContainer Title="添加设备">
    <Content>
        <span>设备的新实例，为设备分配唯一的Id</span>
    </Content>
    <ChildContent>
        @if (success)
        {
           <Alert Type="@AlertType.Success"
               Message="@alertMessage"
               ShowIcon="true" />
        }
        @if (error)
        {
           <Alert Type="@AlertType.Error"
               Message="@alertMessage"
               ShowIcon="true" />
        }

        <Card>
            <Form 
                Model="@_model"
                Style="margin-top: 8px;"
                OnFinish="HandleSubmit">
                <FormItem Label="设备名称" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
                    <Input @bind-Value="@context.Name" />
                </FormItem>
                <FormItem Label="设备类型" LabelCol="_formItemLayout.LabelCol" WrapperCol="_formItemLayout.WrapperCol">
                    <Select TItem="DeviceType"
                            TItemValue="int"
                            DataSource="@deviceTypes"
                            @bind-Value="@context.Type"
                            LabelName="@nameof(DeviceType.Name)"
                            ValueName="@nameof(DeviceType.Id)">
                            Style="width:120px"
                    </Select>
                </FormItem>
                <FormItem Style="margin-top:32px" WrapperCol="_submitFormLayout.WrapperCol">
                    <Button Type="primary" HtmlType="submit">
                        添加设备
                    </Button>
                </FormItem>
            </Form>
        </Card>
    </ChildContent>
</PageContainer>
@code {
    [Inject] protected IDeviceService DeviceService { get; set; }

    private async Task HandleSubmit()
    {
        var result = await DeviceService.AddDeviceAsync(_model);

        alertMessage = result.Message;
        if (result.Code == 0) { success = true; error = false; }
        else { error = true; success = false; }
    }

    private string alertMessage = "";
    bool success = false;
    bool error = false;
    private DeviceType[] deviceTypes;

    public class DeviceModel
    {
        [Required]
        public string Name { get; set; }

        [Required]
        public int Type { get; set; }
    }

    class FormItemLayout
    {
        public ColLayoutParam LabelCol { get; set; }
        public ColLayoutParam WrapperCol { get; set; }
    }

    private DeviceModel _model = new();

    protected async override Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var resp = await DeviceService.GetDeviceTypeAsync();
        this.deviceTypes = resp.Data;
    }

    private readonly FormItemLayout _formItemLayout = new FormItemLayout
    {
        LabelCol = new ColLayoutParam
        {
            Xs = new EmbeddedProperty { Span = 24 },
            Sm = new EmbeddedProperty { Span = 7 },
        },

        WrapperCol = new ColLayoutParam
        {
            Xs = new EmbeddedProperty { Span = 24 },
            Sm = new EmbeddedProperty { Span = 12 },
            Md = new EmbeddedProperty { Span = 10 },
        }
    };

    private readonly FormItemLayout _submitFormLayout = new FormItemLayout
    {
        WrapperCol = new ColLayoutParam
        {
            Xs = new EmbeddedProperty { Span = 24, Offset = 0 },
            Sm = new EmbeddedProperty { Span = 10, Offset = 7 },
        }
    };
}
